<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>权限管理系统</title>
		<script src="js/vue.js"></script><!-- 必须先导入vue -->
		<script src="js/axios.min.js"></script>
		<script src="js/elementui.js"></script>
		<link rel="stylesheet" href="css/index.css" />
		<style>
			#box{
				margin: auto;
				margin-top: 50px;
				padding: 10px 10px 10px 10px ;
				border: 1px skyblue solid;
				height: 400px;
				width: 700px;
				background-color: white;
				border-radius: 5%;
			}
			body{
				background-color: aliceblue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="box">
				<h3 style="color: cadetblue;">&nbsp;漂亮的登陆页面&nbsp;&nbsp;<el-button type="primary" size="mini" onclick="location.href='register.html'" plain>去注册</el-button></h3>
				<hr style="margin-bottom: 30px;"/>
				<el-form :model="ruleForm"  :rules="rules"   ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-row >
					<el-col :span="12" :offset="5">
					<el-form-item label="用户名" prop="uname">
					    <el-input v-model="ruleForm.uname "></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="upwd">
					    <el-input type="password" v-model="ruleForm.upwd" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item>
					    <el-button type="primary" @click="submitForm('ruleForm')">登陆</el-button>
					    <el-button @click="resetForma('ruleForm')">重置</el-button>
					  </el-form-item>
					</el-col>
					</el-row >
				</el-form>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				ruleForm:{uname :"",upwd:""},
				rules: {
				          uname : [
				            { required: true, message: '请输入用户名', trigger: 'blur' }
				          ],
						  upwd: [
				            { required: true, message: '请输入密码', trigger: 'blur' }
				          ]
					}
			},methods:{
				  submitForm(formName) {
					   this.$refs[formName].validate((valid) => {
					            if (valid) {
					             //登陆
								 axios.post("http://localhost:8081/s/loginTwo",this.ruleForm).then(res=>{
									  console.log(res.data);
									 if(res.data.code==200){
										 //存储账号和密码
										let token=res.data.data.token;
										//将token存入浏览器
										window.localStorage.setItem("token",token)
										  // sessionStorage.setItem("uname",this.ruleForm.uname);
										  // sessionStorage.setItem("upwd",this.ruleForm.upwd);
										  // sessionStorage.setItem("uid",res.data[0].id);
										window.location.href="menu.html";
										 }else{
											 this.$message.error('用户名或密码错误');
										 }
									 
								 })
					            } else {
					              console.log('error submit!!');
					              return false;
					            }
					          });
			  },
			  resetForma(formName) {
				this.$refs[formName].resetFields();
			  }
			}
				})
	</script>
</html>